<template>
  <div class="home">
    <el-container class="home-container">
      <el-aside
        width="200px"
        class="side">
        <Menu />
      </el-aside>
      <el-container class="main">
        <el-header class="header">
          <Header />
        </el-header>
        <el-main
          class="content"
          v-loading="firstLoading"
          :element-loading-background="bg"
          :element-loading-spinner="Svg">
          <router-view
            v-slot="{ Component }"
            class="view"
            @scroll="autoHide()">
            <KeepAlive :max="8">
              <component
                :key="route.fullPath"
                :is="Component" />
            </KeepAlive>
          </router-view>
        </el-main>
        <el-footer class="footer"><Footer /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { provide, ref, Ref } from 'vue';
import { useRoute } from 'vue-router';
import { getTheme } from '../utils/util';
import { Svg } from '../model';
import useConfigStore from '../store/config';
import Menu from '../components/SideMenu.vue';
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
import _ from 'lodash';
import { storeToRefs } from 'pinia';

const route = useRoute();
//配置主题
const bg = getTheme().get('background');
const menu = getTheme().get('menuColor');

//页面加载动画
const firstLoading = ref<boolean>(false);
provide<Ref<boolean>>('firstLoading', firstLoading);

const config = useConfigStore();
const { showScroll, left } = storeToRefs(config);

//计时器判断是否显示进度条
let timeid: number = 0;
//自动隐藏进度条
const autoHide = _.throttle(
  () => {
    if (showScroll.value != 'block') {
      showScroll.value = 'block';
      left.value = '6px';
    }
    if (timeid) {
      clearTimeout(timeid);
    }
    timeid = setTimeout(() => {
      if (showScroll.value != 'none') {
        showScroll.value = 'none';
        left.value = '0';
      }
    }, 3000);
  },
  600,
  { leading: true, trailing: false }
);
</script>

<style lang="less" scoped>
@side-background: v-bind(menu);
@other-background: v-bind(bg);

.home-container {
  overflow: hidden;
  .side {
    background-color: @side-background;
    display: flex;
    justify-content: center;
  }

  .main {
    background-color: @other-background;

    .header {
      height: 10vh;
      padding: 0;
    }

    .content {
      padding: 0;
      height: 80vh;
      width: 87vw;
      overflow: auto;

      &::-webkit-scrollbar {
        display: none;
      }
      .view {
        padding-left: v-bind(left);
        &::-webkit-scrollbar {
          display: v-bind(showScroll);
        }
      }
    }

    .footer {
      height: 10vh;
      padding: 0;
    }
  }
}
</style>
